<?php
    // Hack to pass through the user from actions (optionally) into the layout
    $user = get_slot("loggedInUser", null);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <?php include_http_metas() ?>
        <?php include_metas() ?>
        <?php include_title() ?>
        <link rel="shortcut icon" href="/img/favicon2.ico" />

        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <?php include_stylesheets() ?>
        <?php include_javascripts() ?>

        <meta property="og:title" content="Fydal" />
        <meta property="og:description" content="Manage your app's user feedback from the App Store, Google Play, Twitter, etc" />
        <meta property="og:image" content="http://fydal.com/img/logo.jpg" />
        <link rel="image_src" href="http://fydal.com/img/logo.jpg" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>

    <body>

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>

                <a class="brand" href="<?php echo url_for($sf_user->isAuthenticated() ? 'feedback/index' : 'home/index') ?>">Fydal <sub>BETA</sub></a>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li id="menu-home"><a href="<?php echo url_for($sf_user->isAuthenticated() ? 'feedback/index' : 'home/index') ?>"><i class="icon-home icon-white"></i>Home</a></li>
                        <?php if ($sf_user->isAuthenticated()): ?>
                            <li id="menu-list"><a href="<?php echo url_for('feedback/list') ?>"><i class="icon-th-list icon-white"></i>View feedback</a></li>
                            <!--li id="menu-update"><a href="<?php echo url_for('feedback/update') ?>"><i class="icon-refresh icon-white"></i>Updates</a></li-->
                            <li id="menu-addSource"><a href="<?php echo url_for('feedback/addSource') ?>"><i class="icon-plus icon-white"></i>Add source</a></li>
                            <li id="menu-setup"><a href="<?php echo url_for('feedback/setup') ?>"><i class="icon-cog icon-white"></i>Setup</a></li>
                        <?php endif; ?>
                    </ul>
                    <ul class="nav pull-right">
                        <?php if ($sf_user->isAuthenticated() && $user && $user->isEligibleForUpgrade()): ?>
                            <li id="menu-upgrade"><a href="#" class="upgrade-show-modal"><i class="icon-arrow-up icon-white"></i>Upgrade</a></li>
                        <?php endif; ?>
                        <li id="menu-give-feedback"><a href="#" id="give-feedback-open"><i class="icon-comment icon-white"></i>Give feedback</a></li>
                        <li id="menu-help"><a href="<?php echo url_for('home/help') ?>"><i class="icon-book icon-white"></i>Help</a></li>
                        <li id="menu-about"><a href="<?php echo url_for('home/contact') ?>"><i class="icon-user icon-white"></i>About</a></li>
                        <?php if ($sf_user->isAuthenticated()): ?>
                            <li id="menu-logout"><a href="<?php echo url_for('home/doLogout') ?>"><i class="icon-eject icon-white"></i>Log out</a></li>
                        <?php else: ?>
                            <li id="menu-login"><a href="#" class="login-show-modal"><i class="icon-road icon-white"></i>Log in</a></li>
                        <?php endif; ?>
                    </ul>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var page = "<?php if (!include_slot('page')) echo "home"; ?>";
                            $("li#menu-" + page).addClass("active");
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>

    <div class="container" id="main">

        <?php echo $sf_content ?>

    </div>

    <div class="footer" style="text-align: center;">
        <hr style="width: 50%; margin-left: auto; margin-right: auto;" />

        <div id="social">
            <div id="twitter" data-url="http://fydal.com/" data-text="Fydal - manage your app's feedback from the App Store, Google Play, Twitter, etc"></div>
            <div id="facebook" data-url="http://fydal.com/" data-text="Fydal - manage your app's feedback from the App Store, Google Play, Twitter, etc"></div>
        </div>
        <div class="clear"></div>
        <script type="text/javascript">
            $('#twitter').sharrre({
                share: {
                  twitter: true
                },
                title: 'Tweet',
                enableHover: false,
                enableTracking: true,
                click: function(api, options){
                  api.simulateClick();
                  api.openPopup('twitter');
                }
            });
            $('#facebook').sharrre({
                share: {
                  facebook: true
                },
                title: 'Like',
                enableHover: false,
                enableTracking: true,
                click: function(api, options){
                  api.simulateClick();
                  api.openPopup('facebook');
                }
            });
        </script>

        <!--p><a href="<?php echo url_for("home/index") ?>">Home</a> | <a href="<?php echo url_for("home/help") ?>">Help</a> | <a href="<?php echo url_for("home/contact") ?>">About/Contact</a></p-->
        <p>Created by Cameron Ross, &copy; 2012</p>
    </div>

    <?php if ($sf_user->isAuthenticated()) { ?>
        <div id="updates-footer" class="navbar navbar-fixed-bottom" style="display: none;">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">Updates</a>

                    <div class="current-update-status">
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            var lastCheckHadUpdates = false;
            var lastRunningUpdate = null;

            var updateStatus = function() {
                $.getJSON(
                    "<?php echo url_for('feedback/updateStatus') ?>",
                    null,
                    function(data) {

                        if (data.result.currentRun) {
                            var text = "";
                            if (lastRunningUpdate && data.result.currentRun.sourceId != lastRunningUpdate.sourceId) {
                                text = "Update for <b>" + lastRunningUpdate.name + "</b> is now complete! ";
                            }
                            text += "<img src='/img/loading.gif' /> Currently running update for <b>" + data.result.currentRun.name + "</b>...";
                            $(".current-update-status").html(text);

                            if (!$("#updates-footer").is(":visible")) { // If it's currently hidden, slide it up
                                $("#updates-footer")
                                    .css("bottom", "-40px")
                                    .show()
                                    .animate({
                                        "bottom": "0px"
                                    }, 1000);
                            }

                            lastCheckHadUpdates = true;
                            lastRunningUpdate = data.result.currentRun;
                        }
                        else if (data.result.pendingRunCount > 0) {
                            var text = "";
                            if (lastRunningUpdate) {
                                text += "Update for <b>" + lastRunningUpdate.name + "</b> is now complete! ";
                            }
                            text += "<b>" + data.result.pendingRunCount + "</b> update" + (data.result.pendingRunCount > 1 ? "s" : "") + " " + (lastRunningUpdate ? "still" : "currently") + " pending...";
                            $(".current-update-status").html(text);

                            if (!$("#updates-footer").is(":visible")) { // If it's currently hidden, slide it up
                                $("#updates-footer")
                                    .css("bottom", "-40px")
                                    .show()
                                    .animate({
                                        "bottom": "0px"
                                    }, 1000);
                            }

                            lastCheckHadUpdates = true;
                            lastRunningUpdate = null;
                        }
                        else {
                            if (lastCheckHadUpdates) {
                                $(".current-update-status").html("All updates complete. Refresh to see your latest feedback!");

                                var flashTime = 1000;
                                $("#updates-footer div, #updates-footer a")
                                    .animate({"color": "#000000", "backgroundColor": "#c89e64"}, flashTime)
                                    .animate({"color": "#c89e64", "backgroundColor": "#000000"}, flashTime)
                                    .animate({"color": "#000000", "backgroundColor": "#c89e64"}, flashTime)
                                    .animate({"color": "#c89e64", "backgroundColor": "#000000"}, flashTime)
                                    .animate({"color": "#000000", "backgroundColor": "#c89e64"}, flashTime)
                                    .animate({"color": "#c89e64", "backgroundColor": "#000000"}, flashTime)
                                    .animate({"color": "#000000", "backgroundColor": "#c89e64"}, flashTime);

                                setTimeout(function() {
                                    $("#updates-footer")
                                        .animate({
                                            "bottom": "-40px"
                                        }, 1000);
                                }, 8000);

                                // TODO Fix this
                            }
                            else {
                                $(".current-update-status").html("");
                                $("#updates-footer").hide();
                            }

                            lastCheckHadRunningUpdate = false;
                            lastRunningUpdate = null;
                        }
                    }
                );
            };

            updateStatus();

            var updateStatusHandle = setInterval(function() {
                updateStatus();
            }, 10000);
        </script>
    <?php } ?>

    <!-- Give feedback modal popup -->
    <div class="modal hide fade" id="give-feedback-modal" style="margin-top: -200px;">
        <div class="modal-header">
            <h3>Tell us what you think of Fydal</h3>
        </div>
        <div class="modal-body main">
            <form class="form-horizontal" id="give-feedback-form" method="post" action="<?php echo url_for('home/doLogin') ?>">

                <fieldset>
                    <div class="control-group">
                        <label class="control-label" for="type">Feedback type</label>
                        <div class="controls">
                            <select id="type">
                                <option value="feature-request">Feature request</option>
                                <option value="bug-report">Bug report</option>
                                <option value="question">Question</option>
                                <option value="comment">Comment</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="message">Message</label>
                        <div class="controls">
                            <textarea class="input-xlarge" id="message" rows="5"></textarea>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="modal-body thanks" style="display: none;">
            <h3 style="text-align: center;">Thanks!</h3>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Cancel</button>
            <button id="give-feedback-submit" class="btn btn-primary">Send</button>
        </div>
    </div>

    <script type="text/javascript">
        $("#give-feedback-open").click(function() {
            $("#give-feedback-modal").modal();

            $("#type").val("feature-request");
            $("#message").val("");

            $("#give-feedback-modal .modal-body.thanks").hide();
            $("#give-feedback-modal .modal-header").show();
            $("#give-feedback-modal .modal-body.main").show();
            $("#give-feedback-modal .modal-footer").show();

            $("#give-feedback-modal").on("shown", function () {
                $("#message").focus();
            });
        });

        $("#give-feedback-submit").click(function() {
            if ($("#message").val()) {
                $("#give-feedback-modal").mask("Sending...");

                var url = "<?php echo url_for('home/giveFeedback') ?>?type=" + $("#type").val() + "&message=" + encodeURIComponent($("#message").val());

                $.getJSON(
                    url,
                    function(data) {
                        $("#give-feedback-modal").unmask();

                        // TODO Transition these nicely
                        $("#give-feedback-modal .modal-body.thanks").show();
                        $("#give-feedback-modal .modal-header").hide();
                        $("#give-feedback-modal .modal-body.main").hide();
                        $("#give-feedback-modal .modal-footer").hide();

                        setTimeout(function() {
                            $("#give-feedback-modal").modal("hide");
                        }, 1000);
                    }
                );
            }
            else {
                $("#message").focus();
            }
        });
    </script>

    <!-- Login modal popup -->
    <div class="modal hide fade" id="login-modal" style="margin-top: -200px;">
        <div class="modal-header">
            <h3>Already a user? Log in now!</h3>
        </div>
        <div class="modal-body">
            <form class="login-form form-horizontal" method="post" action="<?php echo url_for('home/doLogin') ?>">

                <?php if ($sf_user->hasFlash("loginError")): ?>
                    <label style="color: red;"><?php echo $sf_user->getFlash("loginError") ?> </label>
                <?php endif; ?>

                <fieldset>
                    <div class="control-group">
                        <label class="control-label" for="email">Email</label>
                        <div class="controls">
                            <input type="text" class="email input-large" name="email" value="<?php echo $sf_user->getFlash("loginEmailAttempt") ?>" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="password">Password</label>
                        <div class="controls">
                            <input type="password" class="password input-medium" name="password" />
                        </div>
                    </div>
                </fieldset>

                <input type="hidden" id="redirect-uri" name="redirect-uri" value="" />
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Cancel</button>
            <button class="login-button btn btn-primary">Log in</button>
        </div>
    </div>

    <script type="text/javascript">
        $(".login-show-modal").click(function() {
            $("#login-modal").modal();

            $("#login-modal .password").val("");

            $('#login-modal').on('shown', function () {
                <?php if ($sf_user->hasFlash("loginEmailAttempt")): ?>
                    $("#login-modal .password").focus();
                <?php else: ?>
                    $("#login-modal .email").val("");
                    $("#login-modal .email").focus();
                <?php endif; ?>
            });
        });

        $(document).ready(function() {
            // Show the modal automatically if there are errors on the login or if there is a redirect to go to
            <?php if ($sf_user->hasFlash("loginError")): ?>
                $(".login-show-modal").click();
            <?php else: ?>
                if ($("#preset-redirect-uri").length > 0 && $("#preset-redirect-uri").val() != "") {
                    $(".login-show-modal").click();
                }
            <?php endif; ?>
        });

        $("#login-modal .login-button").click(function() {
            if (!$("#login-modal .email").val()) {
                $("#login-modal .email").focus();
            }
            else if (!$("#login-modal .password").val()) {
                $("#login-modal .password").focus();
            }
            else {
                $("#redirect-uri").val($("#preset-redirect-uri").val());
                $("#login-modal .login-form").submit();
            }
        });

        // Allow enter click
        $("#login-modal .password").keyup(function(e) {
            if (e.keyCode == 13 && $("#login-modal .password").val()) {
                $("#login-modal .login-form").submit();
                e.preventDefault();
            }
        });

    </script>

    <!-- Upgrade modal popup -->
    <div class="modal hide fade" id="upgrade-modal">
        <div class="modal-header">
            <h3>Upgrade your account</h3>
        </div>
        <div class="modal-body main">
            <p class="upgrade-required-reason"></p>

            <?php
                if (isset($user) && $user && $user->isEligibleForUpgrade()) {
                    DisplayHelper::printUpgradeDetails();
                }
                else if (isset($user) && $user) {
                    echo "<p>You are already a premium user.</p>";
                }
                else {
                    echo "<p>Please login to your account (or create a new account) to become a premium user.</p>";
                }
            ?>
        </div>
        <div class="modal-footer">
            <button id="delete-cancel" class="btn" data-dismiss="modal">Close</button>
        </div>
    </div>

    <script type="text/javascript">
        var showUpgradeModal = function(reason) {
            if (reason) {
                $("#upgrade-modal .upgrade-required-reason")
                    .show()
                    .html(reason);
            }
            else {
                $("#upgrade-modal .upgrade-required-reason").hide();
            }

            $("#upgrade-modal").modal();
        };

        $(".upgrade-show-modal").click(function() {
            showUpgradeModal();
        });
    </script>

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-34015555-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>

  </body>
</html>